<template>
    <div>
        <!-- 搜索 -->
        <el-form :inline="true" ref="params" size="small" :model="params" class="demo-form-inline" @submit.native.prevent>
            <el-form-item label="资源名称">
                <el-input @keyup.enter.native="onSubmit" v-model="params.headline" clearable placeholder="资源名称"></el-input>
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="params.supplyDemand" placeholder="类型">
                    <el-option label="需求" value="0"></el-option>
                    <el-option label="供应" value="1"></el-option>
                </el-select>
            </el-form-item>
           
            <el-form-item label="有效期起止">
                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="dateVal" type="datetimerange" @input="selectVal" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="params.auditorState" placeholder="状态">
                    <el-option label="待审核" value="0"></el-option>
                    <el-option label="已发布" value="1"></el-option>
                    <el-option label="审核驳回" value="2"></el-option>
                    <el-option label="下架" value="3"></el-option>
                    <el-option label="草稿" value="4"></el-option>
                    <el-option label="交接完成" value="5"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button @click="onReset">重置</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd('add')">新增</el-button>
                <el-button size="small" @click="batchDelete()" plain type="danger">批量删除</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="tableData" style="width: 100%" :header-cell-style="{ background: '#f0f2f5' }"
            :row-key="getKey" ref="tableRef" @selection-change="changeSelect">
            <el-table-column type="selection" width="55" reserve-selection :selectable="judgeSelect">
            </el-table-column>
            <el-table-column label="序号" width="48" type="index"></el-table-column>
            <el-table-column prop="headline" label="资源名称" show-overflow-tooltip width="150">
            </el-table-column>
            <el-table-column prop="supplyDemand" label="类型">
                <template slot-scope="scope">
                    <span v-if="scope.row.supplyDemand === '0'">需求</span>
                    <span v-if="scope.row.supplyDemand === '1'">供应</span>
                </template>
            </el-table-column>
            <el-table-column prop="relationRen" label="联系人" width="100">
            </el-table-column>
            <el-table-column prop="relationPhone" label="联系方式" show-overflow-tooltip width="100">
            </el-table-column>
            <el-table-column prop="auditorState" label="状态">
                <template slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.auditorState === '0'" type="warning">待审核</el-tag>
                    <el-tag size="mini" v-if="scope.row.auditorState === '1'" type="success">已发布</el-tag>
                    <el-tag size="mini" v-if="scope.row.auditorState === '2'" type="danger">审核驳回</el-tag>
                    <el-tag size="mini" v-if="scope.row.auditorState === '3'" type="info">下架</el-tag>
                    <el-tag size="mini" v-if="scope.row.auditorState === '4'" >草稿</el-tag>
                    <el-tag size="mini" v-if="scope.row.auditorState === '5'">对接完成</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="170" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="updateTime" label="更新时间" width="170" show-overflow-tooltip>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button
                        :disabled="scope.row.auditorState == '0' || scope.row.auditorState == '1' || scope.row.auditorState == '5'"
                        @click="handleEdit('edit', scope.row)" type="text" size="small">编辑</el-button>
                    <el-button
                        :disabled="scope.row.auditorState === '0' || scope.row.auditorState === '1' || scope.row.auditorState === '5'"
                        @click="hanldeDelete(scope.row.id)" type="text" size="small">删除</el-button>
                    <el-button :disabled="scope.row.auditorState !== '4'" @click="handleTo(scope.row.id)" type="text" size="small">提交</el-button>
                    <el-button v-if="scope.row.auditorState == '1'" @click="handleOff(scope.row.id)" type="text"
                        size="small">下架</el-button>
                    <el-button v-if="scope.row.auditorState == '1' || scope.row.auditorState == '5'"
                        @click="handleContact(scope.row.id)" type="text" size="small">查看联系人</el-button>
                    <el-button :disabled="scope.row.auditorState !== '1'" @click="handleContract(scope.row.id,scope.row.supplyDemand)" type="text"
                        size="small">上传合同</el-button>
                    <el-button @click="handleDetail(scope.row.id)" type="text" size="small">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="poolPage">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="params.page" :page-sizes="[10, 20, 30]" :page-size="params.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <!-- 表单 -->
        <FormDialog @getResoure="getResoure" ref="formContent" />
        <!-- 详情 -->
        <HousesDetail ref="detailContent" @getResoure="getResoure" />
        <!-- 在线沟通联系人 -->
        <ContactList ref="contactContent" />
        <!-- 上传合同 -->
        <ContractDialog ref="contrac" @getResoure="getResoure" />
    </div>
</template>
<script>
import { resourceList, resourceDelete, resourceOffshelf ,resourceDetail,resourceEdit} from "@/request/api/resource"
import FormDialog from "./marketForm.vue"
import HousesDetail from "./marketDetail.vue"
import ContactList from "./contactList.vue"
import ContractDialog from "./contractDialog.vue"
export default {
    components: {
        FormDialog,
        HousesDetail,
        ContactList,
        ContractDialog
    },
    data() {
        return {
            multipleSelection: [],//批量选择
            loading: true,
            tableData: [],
            params: {
                headline: '',//标题
                supplyDemand: '',//类型（0需求 1供应）
                page: 1,
                pageSize: 10,
                createBy: '',//创建者id
                resourceType: '2',//类型（0市场资源 1数据资源 2产品资源）
                startTime: '',//开始时间
                endTime: '',//结束时间
            },
            total: 0,
            imgUrl: '',
            dateVal:[]
        }
    },
    created() {
        this.getResoure()
    },
    methods: {
        // 获取列表
        getResoure() {
            var userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
            this.params.createBy = userInfo.id
            resourceList(this.params).then(res => {
                this.loading = false
                if (res.data.code === 200) {
                    this.tableData = res.data.result.items
                    this.total = res.data.result.total
                }
            })
        },
        // 搜索
        onSubmit() {
            this.params.page = 1;
            this.getResoure();
        },
        // 重置
        onReset() {
            let params = {
                page: 1,
                pageSize: 10
            }
            this.dateVal=['','']
            this.params = params
            this.getResoure();
        },
        handleSizeChange(val) {
            this.params.pageSize = val;
            this.params.page = 1;
            this.getResoure();
        },
        handleCurrentChange(val) {
            this.params.page = val;
            this.getResoure();
        },
        // 新增产品
        handleAdd(type, data) {
            this.$refs.formContent.open(type, data)
        },
        // 编辑产品
        handleEdit(type, data) {
            this.$refs.formContent.open(type, data)
        },
        // 删除
        hanldeDelete(id) {
            this.$confirm("确定删除吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                resourceDelete(id).then((res) => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: res.data.message,
                            type: "success",
                        });
                        this.getResoure()
                        this.$refs.tableRef.clearSelection();

                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            })
        },
        // 选择左侧复选框
        changeSelect(val) {
            this.multipleSelection = val;
        },
        getKey(row) {
            return row.id;
        },
        // 批量删除
        batchDelete() {
            if (this.multipleSelection.length === 0) {
                this.$message({
                    message: '请选择数据！',
                    type: 'warning'
                });
                return false;
            }
            this.$confirm("确定删除吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                var ids = this.multipleSelection.map(item => item.id)
                this.hanldeDelete(ids)
            })
        },
        // 查看详情
        handleDetail(id) {
            let url = this.$router.resolve({
				name: "resourceDetail",
				query: {
					id,
				},
			});
			window.open(url.href, "_blank");
            // this.$refs.detailContent.open(id)
        },
        // 查看联系人
        handleContact(id) {
            this.$refs.contactContent.open(id)
        },
        // 判断表格每一行的 CheckBox 是否可以勾选
        judgeSelect(row, index) {
            return row.auditorState == '2' || row.auditorState == '3' || row.auditorState == '4' // 返回true该行可选，返回false则不可选
        },
        // 下架
        handleOff(id) {
            this.$confirm("确定下架吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let params = {
                    id: id, //
                    auditorState: "3" //状态(0待审核 1通过 2驳回 3下架 4保存为草稿 5交接完成)
                }
                console.log(params)
                resourceOffshelf(params).then((res) => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: res.data.message,
                            type: "success",
                        });
                        this.getResoure()
                        this.$refs.tableRef.clearSelection();
                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            })
        },
        // 上传合同点击
        handleContract(id,supplyDemand) {
            this.$refs.contrac.open(id,supplyDemand)
        },
        selectVal(val){
            console.log(val)
            this.params.startTime=val[0]
            this.params.endTime=val[1]
        },
        // 提交
        handleTo(id) {
            this.$confirm("确定提交吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                resourceDetail(id).then(res => {
                    console.log(res, '详情')
                    if (res.data.code == 200) {
                        let params = res.data.result
                        params.auditorState = '0'
                        if(params.accessoryDtos.length!==0){
                            params.accessoryDtos.forEach(item=>{
                                delete item.id
                            })
                        }
                        this.editResult(params)
                    }
                })
            })

        },
         // 修改接口
         editResult(params) {
            resourceEdit(params).then((res) => {
                this.loading = false
                this.loadingSave=false
                if (res.data.code === 200) {
                    this.$message({
                        message: res.data.message,
                        type: "success",
                    });
                    this.getResoure()

                } else {
                    this.$message.error(res.data.message);
                }
            });
        },
    }
}
</script>
<style lang="less" scoped>
.poolPage {
    margin-top: 15px;
    text-align: right;
}
</style>

